import 'package:flutter/material.dart';

import 'package:get/get.dart';

import '../controllers/ip_elite_controller.dart';
import 'package:banquanjie_app/app/widget/common/customScaffold.dart';
import 'package:banquanjie_app/app/services/screenAdapter.dart';
import 'package:banquanjie_app/app/widget/common/dropdownMenu.dart';
import 'package:banquanjie_app/app/widget/ipElite/cardList.dart';
import 'package:dropdown_button2/dropdown_button2.dart';

class IpEliteView extends GetView<IpEliteController> {
  const IpEliteView({super.key});
  @override
  Widget build(BuildContext context) {
    return Customscaffold(
      title: 'IP精英', 
      child: Obx(() =>Column(
        children: [
          Container(
            width: double.infinity,
            height: ScreenAdapter.width(88),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border(top: BorderSide(color: Color(0XFFF4F7FC)))
            ),
            child: Row(
              children: [
                Expanded(
                  flex: 1,
                  child: Row(
                    children: [SizedBox(width: ScreenAdapter.width(28)),
                      Container(
                        margin: EdgeInsets.only(right: ScreenAdapter.height(22)),
                        width: ScreenAdapter.width(108),
                        height: ScreenAdapter.width(50),
                        child: ElevatedButton(
                          style: ButtonStyle(
                            padding: WidgetStatePropertyAll(EdgeInsets.all(0)),
                            backgroundColor: WidgetStateProperty.all(controller.tempQuery['sortType'] == 3 ? Color.fromRGBO(0,178,119,1): Color(0xFFF2F2F2)),
                          ),
                          onPressed: (){
                            if (controller.tempQuery['sortType'] == 3) return;
                            controller.setSearchQueryValue('sortType', 3);
                            controller.onSearch();
                          },
                          child: Text('最新', style: TextStyle(color: controller.tempQuery['sortType'] == 3 ? Colors.white:Colors.black, fontSize: ScreenAdapter.fontSize(28)),)
                        )
                      ),
                      Container(
                        margin: EdgeInsets.only(right: ScreenAdapter.height(22)),
                        width: ScreenAdapter.width(108),
                        height: ScreenAdapter.width(50),
                        child: ElevatedButton(
                          style: ButtonStyle(
                            padding: WidgetStatePropertyAll(EdgeInsets.all(0)),
                            backgroundColor: WidgetStateProperty.all(controller.tempQuery['sortType'] == 2? Color.fromRGBO(0,178,119,1): Color(0xFFF2F2F2)),
                          ),
                          onPressed: (){
                            if (controller.tempQuery['sortType'] == 2) return;
                            controller.setSearchQueryValue('sortType', 2);
                            controller.onSearch();
                          },
                          child: Text('推荐', style: TextStyle(color: controller.tempQuery['sortType'] == 2 ? Colors.white : Colors.black, fontSize: ScreenAdapter.fontSize(28)),)
                        )
                      ),
                    ],
                  )
                ),
                DropdownButtonHideUnderline(
                  child: DropdownButton2<String>(
                    isExpanded: true,
                    // hint: Text(
                    //   '',
                    //   style: TextStyle(
                    //     fontSize: ScreenAdapter.fontSize(28),
                    //     color: Theme.of(context).hintColor,
                    //   ),
                    // ),
                    items: (controller.dicList['provinceList'] as List).map((item) => DropdownMenuItem<String>(
                          value: "${item['id']}",
                          child: Text(
                            "${item['areaName']}",
                            style: TextStyle(
                              fontSize: ScreenAdapter.fontSize(28),
                            ),
                          ),
                        )
                      ).toList(),
                    value: controller.query['province'],
                    onChanged: (String? value) {
                      // setState(() {
                      //   selectedValue = value;
                      // });
                      controller.setSearchQueryValue('province', value);
                      controller.onSearch();
                      print(value);
                    },
                    dropdownStyleData: DropdownStyleData(
                      width: ScreenAdapter.width(300),
                      maxHeight: MediaQuery.of(context).size.height * 0.5,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(2),
                        color: Colors.white,
                      ),
                      offset: const Offset(-20, 0),
                      scrollbarTheme: ScrollbarThemeData(
                        thumbColor: WidgetStateProperty.all(Colors.grey[300]),
                      ),
                    ),
                    // buttonStyleData: const ButtonStyleData(
                    //   padding: EdgeInsets.symmetric(horizontal: 16),
                    //   height: 40,
                    //   width: 140,
                    // ),
                    customButton: Container(
                      width: ScreenAdapter.width(250),
                      height: ScreenAdapter.width(80),
                      padding: EdgeInsets.symmetric(horizontal: ScreenAdapter.width(16)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Expanded(
                            child: Text(
                              controller.query['province'].isNotEmpty ? 
                              controller.dicList['provinceList']
                                  .firstWhere(
                                    (item) => "${item['id']}" == controller.query['province'],
                                    orElse: () => null,
                                  )['areaName'] : '所在城市',
                              textAlign: TextAlign.right, // 文字靠右
                              style: TextStyle(fontSize: ScreenAdapter.fontSize(28), fontWeight: FontWeight.w500,),
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          const Icon(Icons.arrow_drop_down),
                        ],
                      ),
                    ),
                    menuItemStyleData: MenuItemStyleData(
                      height: ScreenAdapter.width(70),
                    ),
                  ),
                ),
                
                
                SizedBox(
                  width: ScreenAdapter.width(200),
                  child: DropDownMenu(
                    closeCallBack: () {
                      controller.closeSearchMask();
                    },
                    controller: controller.dropDownMenuController,
                    items: [
                      controller.tempQuery['occupationIds'] != '' ? 
                        controller.dicList['occupationIdsList'].firstWhere((value) {return value['id'] == controller.tempQuery['occupationIds'];})['dicName'] : 
                        '职业类型'
                    ],
                    dropItems: [


                      Obx(() => Stack(
                        children: [
                          Container(
                            width: double.infinity,
                            padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),ScreenAdapter.width(20),0,ScreenAdapter.width(146)),
                            constraints: BoxConstraints(
                              maxHeight: MediaQuery.of(context).size.height * 0.6,
                            ),
                            child: ListView(
                              shrinkWrap: true,
                              children: [
                                Padding(
                                  padding: EdgeInsets.only(bottom: ScreenAdapter.width(30)),
                                  child: Wrap(
                                    runSpacing: ScreenAdapter.width(30),
                                    spacing: ScreenAdapter.width(8),
                                    children: [
                                      for(int i = 0; i < controller.dicList['occupationIdsList'].length; i++)
                                        InkWell(
                                          onTap: (){
                                            controller.setSearchQueryValue('occupationIds', controller.dicList['occupationIdsList'][i]['id']);
                                          },
                                          child: Container(
                                            padding: EdgeInsets.symmetric(horizontal: ScreenAdapter.width(8)),
                                            constraints: BoxConstraints(
                                              minWidth: ScreenAdapter.width(170)
                                            ),
                                            height: ScreenAdapter.width(56),
                                            decoration: BoxDecoration(
                                              color: controller.tempQuery['occupationIds'] == controller.dicList['occupationIdsList'][i]['id'] ? Color.fromRGBO(0,178,119,.1) : Color(0xFFF7F7F7),
                                              borderRadius: BorderRadius.circular(ScreenAdapter.width(56))
                                            ),
                                            child: Text(
                                              controller.dicList['occupationIdsList'][i]['dicName'], 
                                              textAlign: TextAlign.center, 
                                              style: TextStyle(
                                                height: 2.15, 
                                                fontSize: ScreenAdapter.fontSize(26), 
                                                color: controller.tempQuery['occupationIds'] == controller.dicList['occupationIdsList'][i]['id'] ? Color(0xFF00b277) : Colors.black)
                                              )
                                          )
                                        ),
                                        
                                    ]
                                  )
                                )
                                
                              ]
                            )
                          ),
                          Positioned(
                            left: 0,
                            bottom: 0,
                            right: 0,
                            child: Container(
                              padding: EdgeInsets.symmetric(horizontal: ScreenAdapter.width(38)),
                              height: ScreenAdapter.width(146),
                              width: double.infinity,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                border: Border(top: BorderSide(color: Color(0xfff3f8ff)))
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Expanded(
                                    flex: 1,
                                    child: SizedBox(
                                      height: ScreenAdapter.width(80),
                                      child: ElevatedButton(
                                        onPressed: (){
                                          controller.onClearCondition();
                                        }, 
                                        style: ButtonStyle(
                                          padding: WidgetStatePropertyAll(EdgeInsets.all(0)),
                                          shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(ScreenAdapter.width(12)))),
                                          backgroundColor: WidgetStateProperty.all(Color(0xffF4F4F4)),
                                        ),
                                        child: Text('清空条件', style: TextStyle(color: Colors.black, fontSize: ScreenAdapter.fontSize(28)))
                                      )
                                    ),
                                  ),
                                  SizedBox(width: ScreenAdapter.width(20)),
                                  Expanded(
                                    flex: 1,
                                    child: SizedBox(
                                    height: ScreenAdapter.width(80),
                                    child: ElevatedButton(
                                      onPressed: (){
                                        controller.onSearch();
                                      }, 
                                      style: ButtonStyle(
                                        padding: WidgetStatePropertyAll(EdgeInsets.all(0)),
                                        shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(ScreenAdapter.width(12)))),
                                        backgroundColor: WidgetStateProperty.all(Color(0xff00b277)),
                                      ),
                                      child: Text('确定', style: TextStyle(color: Colors.white, fontSize: ScreenAdapter.fontSize(28)))
                                    )
                                  )
                                )
                                ],
                              )
                            )
                          )
                        ]
                      )),
                    ],
                    selectedColor: Colors.black,
                  )
                )
                
              ]
            ),
          ),
          
          Expanded(
            flex: 1,
            child: RefreshIndicator(
              onRefresh: controller.onRefresh,
              child: controller.total.value == 0 ? Center(child: Text('暂无数据')) : ListView.builder(
                padding: EdgeInsets.all(ScreenAdapter.width(20)),
                controller: controller.scrollController,
                itemCount: controller.ipEliteList.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: ScreenAdapter.width(20)),
                        child: EliteCardList(item: controller.ipEliteList[index])
                      ),
                      if (controller.total.value == controller.ipEliteList.length && index == controller.ipEliteList.length - 1) 
                        Text('到底了', style: TextStyle(height: 2,color: Colors.black,fontSize: ScreenAdapter.fontSize(28)),)
                    ]
                  );
                }
              )
            )
          ),
        ],
      )
      )
    );
  }
}
